<script lang="ts">
import { defineComponent, reactive, ref, toRaw } from "vue";
import { Toast } from "@/utils/toast";

import PopupBottom from "@/components/popup/bottom.vue";
import FormButton from "@/components/form/button.vue";

export default defineComponent({
  components: { PopupBottom, FormButton },
  setup() {
    let confirmCallback: ((value: string) => void) | undefined = undefined;

    const visible = ref(false);

    const inputValue = ref("");
    const configData = reactive({
      title: "",
      inputType: "text",
      placeholder: "",
      maxLength: 10,
      unit: "",
    });

    const confirmClick = () => {
      if (!inputValue.value) return Toast.show(configData.placeholder);

      confirmCallback?.(toRaw(inputValue.value));
      visible.value = false;
    };

    const show = (
      option: {
        value: string;
        title: string;
        placeholder: string;
        inputType?: string;
        maxLength?: number;
        unit?: string;
      },
      callback: (value: string) => void
    ) => {
      inputValue.value = option.value;
      configData.title = option.title;
      configData.placeholder = option.placeholder;
      configData.inputType = option.inputType || "text";
      configData.maxLength = option.maxLength || 10;
      configData.unit = option.unit || "";
      visible.value = true;
      confirmCallback = callback;
    };

    return { visible, inputValue, configData, confirmClick, show };
  },
});
</script>

<template>
  <PopupBottom v-model="visible" :title="configData.title" :showClose="false">
    <view class="edit-form">
      <view class="edit-form-cancel" @click="visible = false">取消</view>
      <view class="edit-form-confirm" @click="confirmClick">保存</view>
      <view class="edit-form-wrapper">
        <view class="edit-form-content">
          <input
            class="edit-form-input"
            v-if="visible"
            v-model="inputValue"
            :type="configData.inputType"
            :placeholder="configData.placeholder"
            :maxlength="configData.maxLength"
          />
        </view>
        <view class="edit-form-unit" v-if="configData.unit">
          {{ configData.unit }}
        </view>
      </view>
      <view class="edit-form-limit">
        {{ inputValue.length }}/{{ configData.maxLength }} 字
      </view>
    </view>
  </PopupBottom>
</template>

<style lang="scss">
.edit-form {
  padding-top: 80rpx;
  padding-bottom: 400rpx;

  .edit-form-cancel,
  .edit-form-confirm {
    position: absolute;
    top: 48rpx;
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.6);
    line-height: 48rpx;
  }

  .edit-form-cancel {
    left: 30rpx;
  }

  .edit-form-confirm {
    right: 30rpx;
    color: #ff7900;
  }

  .edit-form-wrapper {
    display: flex;
    align-items: flex-end;
    padding: 0 40rpx;
    margin-bottom: 20rpx;
  }

  .edit-form-content {
    display: flex;
    align-items: center;
    flex-grow: 1;
    min-width: 0;
    height: 88rpx;
    padding: 0 30rpx;
    border-bottom: 2rpx solid #e8e8e8;
  }

  .edit-form-input {
    flex-grow: 1;
    min-width: 0;
    font-size: 32rpx;
    color: #333333;
  }

  .edit-form-unit {
    flex-shrink: 0;
    margin: 0 30rpx;
    font-size: 36rpx;
    color: #ff7900;
    line-height: 50rpx;
    font-weight: bold;
  }

  .edit-form-limit {
    padding-right: 40rpx;
    font-size: 24rpx;
    text-align: right;
    color: #cccccc;
    line-height: 34rpx;
  }
}
</style>